<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luckin coffee</title>
    <link rel="shortcut icon" href="./image/icon-page1/icon_ruixingkafei1.png">
    <link rel="stylesheet" href="./css/ALL.css">
    <link rel="stylesheet" href="./css/Get the APP.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="head">
        <!-- logo部分 -->
        <div class="header-logo">
            <a href="Home.html">
                <span class="header-logo-img" id="logoimgchange"></span>
                <strong class="header-logo-font" id="logofontchange">luckin coffee</strong>
            </a>
        </div>
        <!-- 右侧导航 -->
        <ul>
            <li class="active">
                <a class="change" href="Home.html">Home
                    <hr id="line1" class="underline">
                </a>

            </li>
            <li class="active">
                <a class="change" href="Get the APP.html">Get the APP
                    <hr id="line2" class="underline">
                </a>
            </li>
            <li class="active">
                <a class="change" href="Products.html">Products
                    <hr id="line3" class="underline">
                </a>
            </li>
            <li class="active">
                <a class="change" href="About Us.html">About Us
                    <hr id="line4" class="underline">
                </a>
            </li>
            <li class="active">
                <a class="change" href="Investor-Relations/Investor Relations.html" target="_blank">Investor Relations
                    <hr id="line5" class="underline">
                </a>
            </li>
        </ul>
    </header>

    <!-- js -->
    <script>
        var head = document.querySelector('.head');
        let logofontchange = document.getElementById('logofontchange');
        let logoimgchange = document.getElementById('logoimgchange');
        function scroll() {
            let top = head.offsetTop;
            console.log(top);
            let scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
            if (scrollTop <= top) {
                head.style.backgroundColor = 'transparent';
                logofontchange.classList.add('header-logo-font-change');
                logoimgchange.classList.add('header-logo-img-change');
                
            }
            else {
                head.style.backgroundColor = '#0A2DB8';
                logofontchange.classList.remove('header-logo-font-change');
                logoimgchange.classList.remove('header-logo-img-change');
            }
        }
        // 每次屏幕滑动时都会检测到，调用scroll方法时刻更新导航栏背景色
        window.addEventListener('scroll', function () {
            scroll();
        })
        scroll();
    </script>

    <!-- 头部结束 -->






    <!-- coffee-mobile开始 -->
    <div class="coffee-mobile">
        <div class="contentMax">
            <div class="coffee-mobile-left">
                <div class="title">
                    Download
                    <br>
                    luckin coffee APP Now
                </div>
                <div class="info">
                    Enjoy your first drink for only
                    <span>$ 0.99</span>
                </div>
                <div class="APP-btn">
                    <div class="btn">
                        <a href="#" class="h1">
                            <img src="https://web.luckincdn.com/download/assets/2928664fe1fc6aca88583a6f606d60ba.svg">
                        </a>
                        <a href="#" class="h2">
                            <img src="https://web.luckincdn.com/download/assets/26ab83a4d15f495c9afe4dd11f94b83d.png">
                        </a>
                    </div>
                    <div class="erweima">
                        <div class="codeImg"></div>
                        <p>Scan QR Code</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- coffee-mobile结束 -->




    <!-- users开始 -->

    <div class="users">
        <div class="contentMax">
            <div class="users-title">120+ million registered APP users</div>
            <div class="users-content">
                <div class="list">
                    <div class="img img1"></div>
                    <p class="title">ORDER ON THE GO</p>
                    <p class="text">Skip the line, get your favourite coffee drinks quickly and easily with our mobile
                        App.</p>
                </div>
                <div class="list">
                    <div class="img img2"></div>
                    <p class="title">EXCLUSIVE DEALS AND VOUCHERS</p>
                    <p class="text">Surprising weekly discounts of vouchers and deals only with App</p>
                </div>
                <div class="list">
                    <div class="img img3"></div>
                    <p class="title">SEAMLESS PAYMENT</p>
                    <p class="text">
                        No more fumbling for cash or cards at the register. Pay for your order securely and easily
                        <br>
                        right from your phone.
                    </p>
                </div>
                <div class="list">
                    <div class="img img4"></div>
                    <p class="title">PERSONALIZED RECOMMENDATIONS</p>
                    <p class="text">Get drink recommendations based on your past orders and preferences.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- users结束 -->



    <!-- friend-cheers开始 -->
    <div class="friend-cheers">
        <div class="contentMax">
            <div class="content">
                <div class="content-info">
                    Refer a Friend to luckin coffee
                    <br>
                    and each of your next drink is
                    <br>
                    at only $0.99!
                </div>
            </div>
        </div>
    </div>







    <!-- 尾部开始 -->
    <footer>
        <div class="content">
            <!-- logo部分 -->
            <div class="content-logo">
                <span class="content-logo-img"></span>
                <strong class="content-logo-font">luckin coffee</strong>
            </div>
            <!-- 中间部分 -->
            <div class="content-info">

                <!-- 左边 -->
                <div class="content-info-left">
                    <div class="info">
                        <p class="title">Company</p>
                        <p>
                            <a href="About Us.html">OUR BRAND</a>
                        </p>
                        <p>
                            <a href="Products.html">OUR COFFEE</a>
                        </p>
                        <p>
                            <a href="https://investor.lkcoffee.com/">INVESTOR RELATIONS</a>
                        </p>
                    </div>
                    <div class="info">
                        <P class="title">More</P>
                        <p class="text">
                            CONTACT US
                        </p>
                    </div>
                </div>

                <!-- 右边 -->
                <div class="content-info-right">
                    <a href="https://space.bilibili.com/515053624?spm_id_from=333.337.0.0" target="_blank">
                        <p class="bilibili"></p>
                    </a>
                    <a href="https://weibo.com/u/6349791448?nick=luckincoffee%E7%91%9E%E5%B9%B8%E5%92%96%E5%95%A1&noscript=1"
                        target="_blank">
                        <p class="weibo"></p>
                    </a>
                    <a href="#" target="_blank">
                        <p class="wechat"></p>
                    </a>
                </div>
            </div>
            <!-- 最后部分 -->
            <div class="termOfUse">
                <a href="https://luckincoffee.com/privacy-policy">PRIVACY POLICY</a>
                <span style="margin: 0 10px;">|</span>
                <a href="https://luckincoffee.com/terms-of-use">TERMS OF USE</a>
                <span style="margin: 0 10px;">|</span>
                <a href="https://luckincoffee.com/cookie-policy">COOKIESPOLICY</a>
            </div>
        </div>
    </footer>
    <!-- 尾部结束 -->
</body>

</html>